<template>
  <div id="driverPractitioners_box">
    <div class="showcardphoto" v-show="showsupervisioncard">
      <div>
        <div class="showcardimg_box">
          <p v-if="supervisioncardUrl" @click="supervisioncardUpload">
            <img :src="supervisioncardUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="supervisioncardUpload">
            <img src="@/assets/imgs/taxi_cyxx_fwjdk_icon@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>服务监督卡正面</h6>
          <p>请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡</p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="cardcannelBtn">取消</span>
          <span class="cardupload" @click="supervisioncardUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <div class="showcardphoto" v-show="showPractitioners">
      <div>
        <div class="showcardimg_box">
          <p v-if="practitionersUrl" @click="practitionersUpload">
            <img :src="practitionersUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="practitionersUpload">
            <img src="@/assets/imgs/cyzg_pic.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>从业资格证正面</h6>
          <p>请按照示例图提交照片信息 确保对齐、文字清晰、无反光、无遮挡</p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="cardcannelBtn">取消</span>
          <span class="cardupload" @click="practitionersUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <div class="driver_top">
      <div class="driver_hx"></div>
      <div class="driver_one">
        <ul>
          <li class="ative">1</li>
          <li class="ative">2</li>
          <li class="ative">3</li>
          <li class="four ative">4</li>
        </ul>
      </div>
      <div class="driver_two">
        <ul>
          <li>
            <p class="text_ative">身份信息</p>
          </li>
          <li>
            <p class="text_ative">公司信息</p>
          </li>
          <li>
            <p class="text_ative">车辆信息</p>
          </li>
          <li>
            <p class="text_ative">从业信息</p>
          </li>
        </ul>
      </div>
    </div>
    <div style="margin-top:20px">
      <md-field>
        <md-field-item
          name
          title="服务监督卡照片"
          align="right"
          arrow="arrow-right"
          :value="supervisioncard"
          @click="supervisioncardBtn"
        ></md-field-item>
        <md-input-item ref="服务监督卡号" title="服务监督卡号" placeholder="请输入服务监督卡号" align="right" v-model="serviceSupervision"></md-input-item>
        <md-field-item
          name
          title="出租车从业资格证照片"
          align="right"
          arrow="arrow-right"
          :value="practitionerstext"
          @click="practitionersBtn"
        ></md-field-item>
        <md-input-item
          ref="出租车从业资格证编号"
          title="出租车从业资格证编号"
          placeholder="请输入出租车从业资格证编号"
          align="right"
          v-model="qualificationCard"
        ></md-input-item>
        <md-field-item
          name
          title="初次领取资格证日期"
          align="right"
          arrow="arrow-right"
          :value="registrationDate"
          @click="registrationDateBtn"
        ></md-field-item>
      </md-field>
    </div>
    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      title="初次领取资格证日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :unit-text="unitText"
      :default-date="currentDate"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
    <div class="companynextBtn" @click="driverPractionersBtn">
      <p>提交审核</p>
    </div>
  </div>
</template>
<script>
import { Icon, Field, FieldItem, InputItem, Toast, Dialog, DatePicker } from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import config from '@/common/config';
import Utils from '@/common/pakjUtils';
import { Base64 } from 'js-base64';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      title: '完善从业信息',
      supervisioncard: '待上传',
      practitionerstext: '待上传',
      showsupervisioncard: false,
      showPractitioners: false,
      isDatePickerShow: false,
      minDate: new Date('1970/9/9'),
      maxDate: new Date(),
      currentDate: new Date(),
      unitText: ['', '', '', '', ''],
      registrationDate: '请选择',
      supervisioncardUrl: '', // 服务监督卡照片
      practitionersUrl: '', // 出租车从业资格证照片
      supervisioncardUploadUrl: '', // 服务监督卡照片url地址
      practitionersUploadUrl: '', // 出租车从业资格证照片url地址
      serviceSupervision: '', // 服务监督号
      qualificationCard: '' // 从业资格证编号
    };
  },
  mounted() {
    window.setCallbackUrl = this.setCallbackUrl;
    // 回显从业信息
    if (this.$route.query.driverId) {
      var params = {
        driverId: this.$route.query.driverId
      };
      Loading.show();
      http.post('/pakj/txDriver/getDriverJobInfo', params).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          if (!res.data.data.serviceCardNumber) {
            this.serviceSupervision = ''; // 服务卡号
          } else {
            this.serviceSupervision = res.data.data.serviceCardNumber; // 服务卡号
          }
          if (!res.data.data.serviceCardPhoto) {
            this.supervisioncardUrl = ''; // 服务卡照片
            this.supervisioncard = '待上传';
          } else {
            this.supervisioncardUrl = res.data.data.serviceCardPhoto; // 服务卡照片
            this.supervisioncardUploadUrl = res.data.data.serviceCardPhoto; // 服务卡照片
            this.supervisioncard = '重新上传';
          }
          if (!res.data.data.jobCertificatePhoto) {
            this.practitionersUrl = ''; // 从业资格证照片
            this.practitionerstext = '待上传';
          } else {
            this.practitionersUrl = res.data.data.jobCertificatePhoto; // 从业资格证照片
            this.practitionersUploadUrl = res.data.data.jobCertificatePhoto; // 从业资格证照片
            this.practitionerstext = '重新上传';
          }
          if (!res.data.data.jobCertificateNumber) {
            this.qualificationCard = ''; // 从业资格证号
          } else {
            this.qualificationCard = res.data.data.jobCertificateNumber; // 从业资格证号
          }
          if (!res.data.data.certificateFirstTime) {
            this.registrationDate = '请选择'; // 资格证初次领取时间
          } else {
            this.registrationDate = moment(res.data.data.certificateFirstTime, 'x').format(
              'YYYY-MM-DD'
            ); // 资格证初次领取时间
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  methods: {
    // 服务监督卡照片
    supervisioncardUpload() {
      this.driverUploadType = '9';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 出租车从业资格证照片
    practitionersUpload() {
      this.driverUploadType = '10';
      this.pullUpAppUpload(this.driverUploadType);
    },
    // 拉起app上传
    pullUpAppUpload(number) {
      /* eslint-disable */
      var type = {
        type: number
      };
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.driverUpload(JSON.stringify(type));
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.driverUpload.postMessage(JSON.stringify(type));
      }
      window.uploadcallback = this.uploadcallback;
    },
    uploadcallback(msg) {
      var data = JSON.parse(Base64.decode(msg));
      switch (String(data.type)) {
        // 9 服务监督卡照片
        case '9':
          this.supervisioncardUrl = data.url;
          break;
        // 10 出租车从业资格证照片
        case '10':
          this.practitionersUrl = data.url;
          break;
        default:
          break;
      }
      console.log(data);
    },
    // 服务监督卡照片上传
    supervisioncardUploadBtn() {
      if (!this.supervisioncardUrl) {
        Toast({
          content: '请上传服务监督卡',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.supervisioncardUploadUrl = this.supervisioncardUrl;
      this.showsupervisioncard = false;
      this.supervisioncard = '重新上传';
    },
    // 出租车从业资格证上传
    practitionersUploadBtn() {
      if (!this.practitionersUrl) {
        Toast({
          content: '请上传出租车从业资格证',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.practitionersUploadUrl = this.practitionersUrl;
      this.showPractitioners = false;
      this.practitionerstext = '重新上传';
    },
    registrationDateBtn() {
      this.isDatePickerShow = true;
    },
    onDatePickerConfirm() {
      this.registrationDate = this.$refs.datePicker.getFormatDate('yyyy-MM-dd');
    },
    supervisioncardBtn() {
      this.showsupervisioncard = true;
    },
    practitionersBtn() {
      this.showPractitioners = true;
    },
    cardcannelBtn() {
      this.showsupervisioncard = false;
      this.showPractitioners = false;
    },
    driverPractionersBtn() {
      var reg = /^[0-9a-zA-Z]+$/;
      if (!this.supervisioncardUploadUrl) {
        Toast({
          content: '请上传服务监督卡',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.serviceSupervision) {
        Toast({
          content: '请输入服务监督号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.serviceSupervision)) {
        Toast({
          content: '服务监督号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.practitionersUploadUrl) {
        Toast({
          content: '请上传出租车从业资格证照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.qualificationCard) {
        Toast({
          content: '请输入出租车从业资格证编号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.qualificationCard)) {
        Toast({
          content: '出租车从业资格证编号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.registrationDate === '请选择') {
        Toast({
          content: '请选择初次领取资格证日期',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        driverId: this.$route.query.driverId,
        serviceCardNumber: this.serviceSupervision, // 服务卡号
        serviceCardPhoto: this.supervisioncardUploadUrl, // 服务卡号照片
        jobCertificatePhoto: this.practitionersUploadUrl, // 从业资格证照片
        jobCertificateNumber: this.qualificationCard, // 从业资格证号
        certificateFirstTime: moment(this.registrationDate).valueOf() // 资格证初次领取时间
      };
      Loading.show();
      http.post('/pakj/txDriver/saveDriverJobInfo', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          // 提交审核
          this.goDriverStatus();
          // this.$router.push({
          //     name: "driverIndex",
          //     query: {
          //         driverId: this.$route.query.driverId,
          //         auditStatus: "1"
          //     }
          // })
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    goDriverStatus() {
      var params = {
        driverPhone: this.$route.query.driverphone
      };
      Loading.show();
      http.post('/pakj/txDriver/getTxDriverAuditInfoByPhone', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.setReturn();
          sessionStorage['examineReason'] = res.data.data.auditRemarks;
          this.$router.push({
            name: 'driverStatus',
            query: {
              auditStatus: res.data.data.auditStatus,
              driverphone: this.$route.query.driverphone,
              driverid: res.data.data.driverId
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 设置返回首页
    /* eslint-disable */
    setReturn() {
      var type = {
        type: '1'
      };
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.setTopReturn(JSON.stringify(type));
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopReturn.postMessage(JSON.stringify(type));
      }
    },
    setCallbackUrl() {
      window.location.href =
        config.pageUrl + 'taxi/#/register/drivertype?driverphone=' + this.$route.query.driverphone;
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.showcardphoto {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.showcardimg_box {
  width: 600px;
  margin: auto;
}

.showcardimg_box p {
  margin-top: 30px;
  position: relative;
}

.showcardimg_box p img {
  width: 600px;
  height: 360px;
}

.showcardimg_box p span {
  width: 200px;
  height: 88px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  display: inline-block;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 148px;
  left: 200px;
}

.showcardtext {
  margin-top: 26px;
}

.showcardtext h6 {
  text-align: center;
  font-size: 32px;
  color: #FF6917;
  font-weight: 400;
}

.showcardtext p {
  color: #fff;
  font-size: 28px;
  text-align: center;
  width: 450px;
  margin: auto;
  padding-top: 20px;
}

.cardBtn {
  margin: 40px;
}

.cardcannel {
  width: 200px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #FF6917;
  background-color: #fff;
  border-radius: 10px;
}

.cardupload {
  width: 440px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #fff;
  background-color: #FF6917;
  margin-left: 30px;
  border-radius: 10px;
}

#driverPractitioners_box {
  height: 100vh;
  background-color: color-primary-background;

  .md-input-item .md-input-item-extra.fixed, .md-input-item .md-input-item-title.fixed {
    width: auto;
  }

  .driver_top {
    height: 180px;
    background: rgba(42, 42, 51, 1);
    padding: 0px 30px;
    font-size: 26px;
  }

  .driver_hx {
    height: 12px;
    width: 77%;
    background-color: #FF6917;
    position: absolute;
    top: 55px;
    left: 80px;
  }

  .driver_one {
    padding-top: 55px;
    margin: 0px 30px;
  }

  .driver_one ul {
    display: flex;
    justify-content: space-between;
    background-color: #E0E0E0;
    height: 12px;
  }

  .driver_one ul li {
    width: 40px;
    height: 40px;
    background-color: #B8B8B8;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    top: -15px;
    right: 2px;
  }

  .driver_one ul li.four {
    left: 4px;
  }

  .driver_one ul li.ative {
    background-color: #FF6917;
    color: #fff;
    border-radius: 50%;
  }

  .driver_two {
    margin-top: 30px;
  }

  .driver_two ul {
    display: flex;
    justify-content: space-between;
    color: #fff;
  }

  .driver_two ul li p.text_ative {
    color: #FF6917;
  }

  .companynextBtn {
    margin: 40px 20px 0px 20px;
  }

  .companynextBtn p {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
  }
}
</style>
